頁尾

在這個範例中要練習頁尾的切版

整理幾個小重點如下方：

1.將footer_content設為滿版，添加背景色#f3c1c5
2.添加一個container，做為固定欄寬1200px的區塊
3.在container設定display: flex讓資料橫排顯示
4.使用justify-content: space-between讓資料可以平均分配剩餘空間寬度，讓第一項和最後一項貼齊邊緣
5.font-size調整文字大小，font-weight調整文字厚度，line-height調整行高，letter-spacing調整文字間距
6.使用超連結a標籤去設定外觀尺寸，但a是inline物件而設定blcok又會自動占滿一行造成換行，這裡可以使用display: inline-block同時兼具兩者的特性，設定尺寸、內距外距都會有作用，也可以水平排列
7.在超連結a添加text-decoration: none的設定，目的是消除一個超連結預設的底線
8.使用text-transform:uppercase所有字母皆為大寫，text-transform:lowercase所有字母皆為小寫，text-transform:capitalize第一個字母為大寫，其他字母為小寫
9.在這裡的日期標籤是使用span標籤，span是inline物件，需要將它設定display: block讓物件占滿整個空間，即可完成文字換行

想直接看效果可以點擊連結>>>https://codepen.io/ocqyfixe/pen/KKRMrmp

HTML

<footer>
    <div class="container">
        <div class="item item_about">
            <h2>小白人的生活</h2>
            <p>可愛的小白人，進入你的日常生活，是一隻從十幾歲開始寫卡片後會畫的可愛小圖，不知不覺就成了簽名的小標誌...</p>
        </div>
        <div class="item item_tags">
            <h2>關於小白人</h2>
            <div class="tags_box">
                <a href="#">胖胖西瓜小白人</a>
                <a href="#">健身壯壯小白人</a>
                <a href="#">早睡早起</a>
                <a href="#">搖呼拉圈</a>
                <a href="#">無言薯條</a>
                <a href="#">生日快樂</a>
            </div>
        </div>
        <div class="item item_recent">
            <h2>其他消息</h2>
            <a href="#">小白人的生活2_第二彈上班族系列<span>July 26, 2022</span></a>
            <a href="#">小白人的生活_第一彈<span>July 26, 2022</span></a>
        </div>
    </div>
</footer>

CSS

footer{
    width: 100%;
    margin: auto;
    background-color: #f3c1c5;
}
.container{
    width: 1200px;
    margin: auto;
    padding: 80px 50px;
    color: #fff;
    display: flex;
    justify-content: space-between;
}
.container .item{
    width: 400px;
}
.container h2{
    font-size: 16px;
    font-weight: 700;
    line-height: 2;
    letter-spacing: 2px;
    padding: 10px 20px;
}
.item_about p{
    font-size: 14px;
    font-weight: 100;
    line-height: 2;
    letter-spacing: 1.2px;
    padding: 10px 20px;
}
.item_tags .tags_box{
    padding: 10px 20px;
}
.item_tags a{
    display: inline-block;
    text-decoration: none;
    color: #fff;
    margin: 0 3px 10px 0;
    background-color: #f7b1b1;
    padding: 14px 20px;
    border-radius: 3px;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 2PX;
}
.item_tags a:hover{
    color: #666666;
}
.item_recent a{
    padding: 10px 20px;
    display: block;
    text-decoration: none;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    line-height: 2;
    letter-spacing: 1.5px;
}
.item_recent span{
    display: block;
    color: #898d92;
    font-size: 12px;
    font-weight: 200;
}